<template>
  <div class="bigfive">
    <div class="bigfive-item" v-for="(item,index) in dataList" :key="index">
     <div class="bigfive-subitem" :style="getShapeClass(item)">
      <div class="f-18">{{ item.name }}</div>
      <div class="mt-4 f-14">{{ item.desc }}</div>
     </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, reactive } from 'vue';
const dataList = ref([
  {
    name: '创造性',
    desc: '富有想象力，独立思考',
    value: 0.5
  },
  {
    name: '分析型',
    desc: '逻辑思维强，注重细节',
    value: 0.5
  },
  {
    name: '同理心',
    desc: '善解人意，情感敏锐',
    value: 0.5
  },
  {
    name: '条理性',
    desc: '计划性强，并然有序',
    value: 0.5
  },
  {
    name: '冒险精神',
    desc: '喜欢挑战，追求新鲜感',
    value: 0.5
  },
  {
    name: '内敛型',
    desc: '安静沉思，喜欢独处',
    value: 0.5
  },
  {
    name: '社交型',
    desc: '外向开朗，善于交际',
    value: 0.5
  },
  {
    name: '可靠性',
    desc: '值得信赖，责任心强',
    value: 0.5
  },
  {
    name: '敏感性',
    desc: '情感丰富，直接敏锐',
    value: 0.5
  },
])
const colors = reactive({
  10: '#e1f0fa',
  20: '#b8ddf5',
  30: '#8fcaf0',
  40: '#66b7eb',
  50: '#3da4e6',
  60: '#3498db',
  70: '#2c81ba',
  80: '#246a99',
  90: '#1c5378'
})
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})

const getShapeClass = (item) => {
  let flag = {
    background: '1c5378',
    color: 'fff'
  }
  const tempdata = props.data.nine_personality_types.find(e => e.name == item.name)
  if (tempdata.score <= 10) {
    flag = {
      background: colors[10],
      color: '#000'
    }
  } else if (tempdata.score > 10 && tempdata.score <= 20) {
    flag = {
      background: colors[20],
      color: '#000'
    }
  } else if (tempdata.score > 20 && tempdata.score <= 30) {
    flag = {
      background: colors[30],
      color: '#000'
    }
  } else if (tempdata.score > 30 && tempdata.score <= 40) {
    flag = {
      background: colors[40],
      color: '#fff'
    }
  } else if (tempdata.score > 40 && tempdata.score <= 50) {
    flag = {
      background: colors[50],
      color: '#fff'
    }
  } else if (tempdata.score > 50 && tempdata.score <= 60) {
    flag = {
      background: colors[60],
      color: '#fff'
    }
  } else if (tempdata.score > 60 && tempdata.score <= 70){
    flag = {
      background: colors[70],
      color: '#fff'
    }
  } else if (tempdata.score > 70 && tempdata.score <= 80) {
    flag = {
      background: colors[80],
      color: '#fff'
    }
  } else if (tempdata.score > 80 && tempdata.score <= 100) {
    flag = {
      background: colors[90],
      color: '#fff'
    }
  }
  return flag
}

</script>

<style lang="scss" scoped>
.bigfive{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  &-item{
    width: calc(100% / 3);
    flex: 0 0 auto;
  }
  &-subitem{
    background: #000;
    border-radius: 12px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    margin-right: 12px;
  }
}
</style>